<template>
  <div class="slide">
    <div class="outer-container">
      <div class="inner-container">
        <div class="content">
          <div class="swiper-box" v-for="(item,index) of types"
               :key="index" @click="tagClick(index)" v-bind:class="{choose:currentIndex == index}">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
    <recommand v-bind:recommand-list="list" :font_left="font"></recommand>
    <square-recommand v-bind:lists="squarerecommand"></square-recommand>
  </div>
</template>

<script>
  import SquareRecommand from "../../../components/content/SquareRecommand/SquareRecommand";
  import Recommand from "../../../components/content/Recommand/Recommand";
  import {getsongsheetfromtag,getsongsheetrecommand} from "../../../network/songsheetsquare";
  export default {
        name: "SlideBar",
      components:{
          Recommand,
          SquareRecommand
      },
        data(){
          return{
            list:[],
              id:'5001',
              tag:'华语',
              font:[],
              currentIndex:0, //标签分类的下标
            squarerecommand:[], //相关歌单推荐列表
              squarerecommandimg:'',
              squarerecommandid:0,
              squarerecommandname:'',
              squarerecommandsong:{},

          }
        },
        props:{
            types:{
                type:Array,
                default(){
                    return[]
                }
            }
        },
        methods:{
            tagClick(index){
                let tagName = this.types[index].name
                this.currentIndex = index
                getsongsheetfromtag(tagName).then(res=>{
                    this.list = res.data.playlists
                    let description = res.data.playlists[1].description
                    this.font = description.split(/[\s\n]/)
                })
            }
        },
        created() {
            getsongsheetfromtag(this.tag).then(res=>{
                this.list = res.data.playlists
                // console.log(res.data.playlists[1].description)
                let description = res.data.playlists[1].description
                this.font = description.split(/[\s\n]/)
            })
            getsongsheetrecommand(this.id).then(res=>{
                console.log(res.data)
               // this.squarerecommand = res.data.playlists
                for(let item of res.data.playlists){
                    this.squarerecommandimg =  item.coverImgUrl
                    this.squarerecommandid = item.id
                    this.squarerecommandname = item.name
                    this.squarerecommandsong ={
                        picUrl:this.squarerecommandimg,
                        id:this.squarerecommandid,
                        name:this.squarerecommandname
                    }
                    this.squarerecommand.push(this.squarerecommandsong)
                }
            })
        }
    }
</script>

<style scoped>
  .slide{
    width: 100%;
  }

  .outer-container {
    width: 100%;
    line-height: 30px;
    margin-top: 5px;
    background-color: #f5f5f5;
    padding-left: 8px;
    align-items: center;
    overflow: hidden
  }

  .content {
    width: 580px;
    height: 30px;
    padding-left: 8px;
    vertical-align: middle
  }

  .inner-container {
    overflow:scroll;
  }
  .inner-container::-webkit-scrollbar {
    display: none;
  }
  .swiper-box{
    display: inline;
    margin-right: 10px;
  }

  .choose{
    font-weight: 500;
    color: crimson;
    border-bottom: 4px crimson solid;
  }


</style>